<template>
  <div>
    <video-player :options="playerOptions" ref="videoPlayer" @ready="playerReadied" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
      @statechanged="playerStateChanged($event)">
    </video-player>
    <!-- 弹幕插件 -->
    <div id="danmu-pannel" @click="playVideo"></div>
  </div>
</template>
<script>
  export default {
    name: "myVideo",
    props: ['videoInfo'],
    data() {
      return {
        randomID: 'player' + new Date().getTime(),
        playerOptions: {
          // videojs and plugin options
          height: 220,
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL",
            src: this.videoInfo.livePath
          }],
          autoPlay: true,
          controlBar: {
            timeDivider: false,
            durationDisplay: false
          },
          flash: {
            hls: {
              withCredentials: false
            }
          },
          html5: {
            hls: {
              withCredentials: false
            }
          },
          poster: this.videoInfo.livePoster
        },
      };
    },
    mounted() {
        
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      playVideo() {
        let video = this.player;
        video.paused ? video.play() : video.pause();
      },
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {}
    }
  };

</script>
<style lang="scss">
  .my-video {
    // display: block;
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }

  #danmu-pannel {
    position: fixed !important;
    width: 100vw;
    height: 56vw;
    top: 45px;
  }

</style>
